Sidebar

功能說明

1. 開合按鈕
2. 側邊欄 :
   • 標題
   • 選單連結
   • 社群媒體
   • 關閉按鈕
     

CSS重點

• .sidebar中控制了sidebar的屬性，並讓其呈現關閉模式 :

/*Navbar*/
...
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-white);
  display: grid;
  grid-template-rows: auto 1fr auto;
  row-gap: 1rem;
  box-shadow: var(--clr-red-dark);
  transition: var(--transition);
  transform: translate(-100%); /* 用此屬性控制縮放 */
}
...

• 但.show-sidebar卻改變transform屬性，讓其呈現開啟模式 :

/*Navbar*/
...
.show-sidebar {
  transform: translate(0);
}
...

• 結論 :
  只要在HTML的aside標籤中加入show-sidebar的Class，就能開啟sidebar；反之，只要移除show-sidebar，就能關閉sidebar

HTML重點

1. 開合按鈕 :

   <button class="sidebar-toggle">
       <!-- 使用Font Awesome的Icon -->
       <i class="fas fa-bars"></i>
   </button>
   

將開合按鈕的Class設為sidebar-toggle

2. Sidebar表頭 :

   <div class="sidebar-header">
       <!-- 匯入標題圖片 -->
       <img src="logo.svg" class="logo" alt="" />
   
       <!-- 關閉按鈕 -->
       <button class="close-btn">
           <i class="fas fa-times"></i>
       </button>
     </div>
   

將關閉按鈕的Class設為sclose-btn

JavaScript重點

1. 利用class="sidebar-toggle"去抓取開合按鈕

   const toggleBtn = document.querySelector(".sidebar-toggle"); 
   

2. 利用class="close-btn"去抓取關閉連結

   const closeBtn = document.querySelector(".close-btn");
   

3. 利用class="sidebar"去抓取整個aside元素

   const sidebar = document.querySelector(".sidebar");
   

4. 將開合按鈕新增點擊事件，進而讓sidebar可以開合

   toggleBtn.addEventListener("click", function () {
     sidebar.classList.toggle("show-sidebar");
   });
   

classList.toggle在上篇文章已有說明

5. 將關閉按鈕新增點擊事件，進而讓sidebar可以關閉

   closeBtn.addEventListener("click", function () {
     sidebar.classList.remove("show-sidebar");
   });
   

classList.remove在上篇文章已有說明

參考與引用來源

1. ClassList與其屬性介紹
2. CSS transform 屬性介紹